<template>
	<view class="ImageMagicCube" v-if="imgCubeList.length!=0">

		<view v-for="(item,bindex) in imgCubeList" :key="bindex">
			<view class="Style01" v-if="item.cubeStyle == 'style1'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style02" v-if="item.cubeStyle == 'style2'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style03" v-if="item.cubeStyle == 'style3'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style04" v-if="item.cubeStyle == 'style4'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style05" v-if="item.cubeStyle == 'style5'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style06" v-if="item.cubeStyle == 'style6'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style07" v-if="item.cubeStyle == 'style7'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style08" v-if="item.cubeStyle == 'style8'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style09" v-if="item.cubeStyle == 'style9'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style10" v-if="item.cubeStyle == 'style10'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="Style11" v-if="item.cubeStyle == 'style11'" style="margin-bottom: 10rpx;">
				<view class="IMC_title" v-if="item.cubeTitle || item.cubeSubTitle">
					<text>{{item.cubeTitle}}</text><text>{{item.cubeSubTitle}}</text>
				</view>
				<view class="ImgDiv">
					<view v-for="(res,index) in item.imgUrls" :key="index">
						<view @click='toNavigate(res)'>
							<image mode="aspectFill" :src="res"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const emits = defineEmits(['toNavigate'])
	const props = defineProps({
		imgCubeList: {
			type: Array,
			default: []
		}
	})
	const toNavigate = (e) => {
		let id = e;
		emits('toNavigate',id);
	}
</script>

<style lang="scss" scoped>
	.ImageMagicCube {
		// width: 100%;
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.ImageMagicCube image {
		display: view;
	}

	.ImageMagicCube>view {
		/* margin-bottom:18rpx; */
		/* background-color: #fff; */
	}

	.ImageMagicCube .IMC_title {
		width: 100%;
		max-height: 50rpx;
		line-height: 50rpx;
		overflow: hidden;
		display: flex;
		color: rgba(145, 145, 145, 1);
		align-items: center;
		padding-bottom: 24rpx;
		padding-top: 22rpx;
	}

	.ImageMagicCube .IMC_title text:nth-of-type(1) {
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(44, 44, 44, 1);
	}

	.ImageMagicCube .IMC_title text:nth-of-type(2) {
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.kongxi {
		width: 100%;
		height: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}


	/* 样式1 */
	.Style01 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(2, 336rpx);
		grid-template-rows: repeat(2, 169rpx);
		grid-gap: 18rpx;
		height: 357rpx;
	}

	.Style01 .ImgDiv>view {
		background: transparent;
		overflow: hidden;
		width: 100%;
		height: 100%;
		border-radius: 8rpx;

	}

	.Style01 .ImgDiv>view:nth-of-type(1) {
		grid-column: 1/2;
		grid-row: 1/3;
	}

	.Style01 .ImgDiv>view image {
		width: 100%;
		// height: 100%;
	}

	/* 样式2 */
	.Style02 .ImgDiv {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		content: '';
	}

	.Style02 .ImgDiv>view {
		width: calc(50% - 9rpx);
		overflow: hidden;
		border-radius: 8rpx;

	}

	.Style02 .ImgDiv>view image {
		width: 100%;
		border-radius: 8rpx;
	}

	/* 样式3 */
	.Style03 .ImgDiv {
		width: 100%;
		height: 200rpx;
		overflow-x: auto;
		display: flex;
		flex-flow: row nowrap;

	}

	.Style03 .ImgDiv .ImgDiv_01 {
		width: fit-content;
		height: 200rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.Style03 .ImgDiv>view>view {
		width: 280rpx;
		height: 100%;
		overflow: hidden;
		margin-right: 18rpx;
		border-radius: 8rpx;

	}

	.Style03 .ImgDiv>view image {
		width: 100%;
		height: 100%;
	}

	/* 样式4 */
	.Style04 .ImgDiv {
		width: 100%;
		height: 210rpx;
		overflow-x: auto;
		display: flex;
		flex-flow: row nowrap;

	}

	.Style04 .ImgDiv .ImgDiv_01 {
		width: fit-content;
		height: 210rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.Style04 .ImgDiv>view>view {
		width: 222rpx;
		height: 210rpx;
		overflow: hidden;
		margin-right: 16rpx;
		border-radius: 8rpx;
	}

	.Style04 .ImgDiv>view image {
		width: 100%;
		height: 100%;
	}

	/* 样式5 */
	.Style05 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(3, 220rpx);
		grid-template-rows: repeat(2, 220rpx);
		grid-gap: 18rpx;
		max-height: 458rpx;
	}

	.Style05 .ImgDiv>view {
		background: transparent;
		overflow: hidden;
		width: 100%;
		height: 100%;
		border-radius: 8rpx;

	}

	.Style05 .ImgDiv>view:nth-of-type(1) {
		grid-column: 1/3;
		grid-row: 1/2;
	}

	.Style05 .ImgDiv>view>view image {
		width: 100%;
		// height: 100%;
	}

	/* 样式6 */
	.Style06 .ImgDiv {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		content: '';
	}

	.Style06 .ImgDiv>view:nth-of-type(1) {
		width: 100%;
	}

	.Style06 .ImgDiv>view {
		width: calc(50% - 9rpx);
		margin-bottom: 18rpx;
		height: 210rpx;
		overflow: hidden;
		border-radius: 8rpx;

	}

	.Style06 .ImgDiv>view>view image {
		width: 100%;
		// height: 100%;
	}

	/* 样式7 */
	.Style07 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 220rpx 110rpx 220rpx;
		grid-gap: 18rpx;
	}

	.Style07 .ImgDiv>view {
		background: transparent;
		overflow: hidden;
		width: 100%;
		height: 100%;
		border-radius: 8rpx;

	}

	.Style07 .ImgDiv>view:nth-of-type(1) {
		grid-column: 1/2;
		grid-row: 1/3;
	}

	.Style07 .ImgDiv>view:nth-of-type(4) {
		grid-column: 2/3;
		grid-row: 2/4;
	}

	.Style07 .ImgDiv>view>view image {
		width: 100%;
		// height: 100%;
	}

	/* 样式8 */
	.Style08 .ImgDiv {
		width: 100%;
		height: 200rpx;
		overflow-x: auto;
		display: flex;
		flex-flow: row nowrap;

	}

	.Style08 .ImgDiv .ImgDiv_01 {
		width: fit-content;
		height: 200rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.Style08 .ImgDiv>view>view {
		width: 620rpx;
		height: 100%;
		overflow: hidden;
		margin-right: 18rpx;
		border-radius: 8rpx;

	}

	.Style08 .ImgDiv>view image {
		width: 100%;
		height: 100%;
	}


	/* 样式9 */
	.Style09 .ImgDiv {
		width: 100%;
		/* height:200rpx; */
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.Style09 .ImgDiv .ImgDiv_01 {
		/* width:fit-content; */
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.Style09 .ImgDiv>view>view {
		width: 170rpx;
		height: 120rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		/* border-radius:8rpx; */
	}

	.Style09 .ImgDiv>view:first-child {
		width: 170rpx;
		// height: 100%;
		height: 120rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 8rpx 0 0 8rpx;
	}

	.Style09 .ImgDiv>view:last-child {
		width: 170rpx;
		height: 120rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 0 8rpx 8rpx 0;
	}

	.Style09 .ImgDiv>view image {
		width: 100%;
		height: 100%;
	}

	/* 样式10 */
	.Style10 .ImgDiv {
		width: 100%;
		height: 500rpx;
		/* height:200rpx; */
		/* overflow-x: auto; */
		display: flex;
		flex-flow: wrap;

	}

	.Style10 .ImgDiv .ImgDiv_01 {
		/* width:fit-content; */
		width: 100%;
		height: 250rpx;
		display: flex;
		flex-flow: wrap;
		/* justify-content: space-between; */
	}

	.Style10 .ImgDiv>view>view {
		width: 177rpx;
		height: 250rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		/* border-radius:8rpx; */
	}

	.Style10 .ImgDiv>view:nth-of-type(1) {
		width: 177rpx;
		height: 250rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 8rpx 0 0 0;
	}

	.Style10 .ImgDiv>view:nth-of-type(4) {
		width: 177rpx;
		height: 250rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 0 8rpx 0 0;
	}

	.Style10 .ImgDiv>view:nth-of-type(5) {
		width: 177rpx;
		height: 250rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 0 0 0 8rpx;
	}

	.Style10 .ImgDiv>view:nth-of-type(8) {
		width: 177rpx;
		height: 250rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 0 0 8rpx 0;
	}

	.Style10 .ImgDiv>view>view {
		width: 177rpx;
		height: 250rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		/* border-radius:8rpx 0 0 0; */
	}

	.Style10 .ImgDiv>view image {
		width: 100%;
		height: 100%;
	}


	/* 样式11 */
	.Style11 .ImgDiv {
		width: 100%;
		/* height:200rpx; */
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.Style11 .ImgDiv .ImgDiv_01 {
		/* width:fit-content; */
		width: 230rpx;
		height: 120rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.Style11 .ImgDiv>view>view {
		width: 230rpx;
		height: 120rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		/* border-radius:8rpx; */
	}

	.Style11 .ImgDiv>view:nth-of-type(1) {
		width: 230rpx;
		height: 120rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 8rpx 0 0 8rpx;
	}

	.Style11 .ImgDiv>view:nth-of-type(3) {
		width: 230rpx;
		height: 120rpx;
		overflow: hidden;
		/* margin-right:18rpx; */
		border-radius: 0 8rpx 8rpx 0;
	}

	.Style11 .ImgDiv>view image {
		width: 100%;
		height: 100%;
	}
</style>
